今天紀錄自己使用 Vue Cli-3 的 side project 的專案配置。

1.安裝 Node.js

安裝Node.js讓JavaScript可以運行在電腦。

2.安裝 NPM (Node套件管理工具)

NPM 全名 Node Package Manager，可以藉由指令輕鬆引入前端套件，就不用再到各套件的網站下載檔案、解壓縮、找到壓縮後的檔案、放到專案的 library 資料夾...，或者找到 cdn 網址等等。

3.安裝Vue

運行 npm install vue

4.創建專案

運行 vue create test-project

5.開啟專案

運行 npm run serve，終端機提示於 localhost 可看到預設的瀏覽器畫面。

6.安裝 Element UI

運行 npm install element-ui，這是一套基於 Vue 的 UI 套件，設計了許多好用的 Vue component 元件，可調用attribute、回調函式以進行客製化。

7.放入 sass 資源

內有多支.sass(如_reset, _variables, _mixin, _extend...)，全部引入到一支 style.sass 作為使用。

8.VS code相關套件

• Sass Compiler
  使用相當多開發者推薦的 Sass Compiler 套件，可將 sass 編譯為 css

9.開啟版控

10.發布

待要發布時運行指令 npm run build 編譯出最小檔案包。

以上是個人作法的簡單紀錄，下個月開始新專案開發，期待從同事高手們身上學到更多的實務經驗囉！